<template>
	<div class="sys-org-container">
		<el-row :gutter="8" style="width: 100%;flex: 1;"> 
			<el-col :span="24" :xs="24" class="orgmap_panel">
				<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
					<el-form :model="state.queryParams" ref="queryForm" :inline="true">
						<el-form-item label="公司" prop="orgId">
							<el-cascader
								:options="state.orgTreeData"
								:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name', expandTrigger: 'hover' }"
								placeholder="公司选择"
								clearable
								class="w100"
								v-model="state.queryParams.orgId"
							>
								<template #default="{ node, data }">
									<span>{{ data.name }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
						<el-form-item label="展开层级" prop="orgType">
							<el-select filterable clearable v-model="state.queryParams.expandLevel" class="w100">
								<el-option v-for="item in state.orgLevels" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button-group> 
								<el-button type="primary" icon="ele-Download" @click="exportPdf"> 导出 </el-button>
							</el-button-group>
						</el-form-item>
					</el-form>
				</el-card>
				<el-card class="full-table" shadow="hover" style="margin-top: 8px;">
					<vue3-tree-org id="orgTree_contair" :data="state.data" center :horizontal="state.horizontal" 
						:collapsable="state.collapsable" :label-style="state.style" :disabled="state.disabled"
						:only-one-node="state.onlyOneNode" 
						:node-draggable="state.nodeDrggable"
						:clone-node-drag="state.cloneNodeDrag"
						> 
						 <!-- 自定义节点内容 -->
						 <template v-slot="{node,itemp}"> 
							<div class="tree-org-node__text node-label">
								<div v-if="node.$$data.level<3" class="org_panel"> 
									<div class='title'>
										<el-icon :size="15" color="#FFFFFF">
											<OfficeBuilding v-if="node.$$data.level<=1"/>
											<Shop v-if="node.$$data.level>1"/>
										</el-icon>
										{{ node.label }}
									</div>
									<div class='teamleader'>{{ node.$$data.leader }}</div>
									<div class='teamnum'>0/{{node.$$data.teamnum}}</div>
								</div>
								<div v-if="node.$$data.level>=3" class="org_panel_v tree-org-node__text node-label">
									<div class='title'>
										<el-icon :size="15" color="#FFFFFF">
											<Shop/>
										</el-icon>
										{{ node.label }}
									</div>
									<div class='teamleader'>{{node.$$data.leader}}</div>
									<div class='teamnum'>0/{{ node.$$data.teamnum }}</div>
								</div>
							</div>
						</template>
					</vue3-tree-org>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<style>
.orgmap_panel{
	display: -webkit-box !important;
    -webkit-box-orient: vertical;
}
div.el-card.full-table{
	-webkit-box-flex: 1;
}
div.tree-org-node__content .tree-org-node__text{
    margin: 0px;
    padding: 0px;
}
div.org_panel{
    min-width: 120px;
    border: solid 1px rgb(51, 152, 177);
}
div.org_panel .title{
    width: 100%;
    font-family: '微软雅黑';
    font-size: 14px;
    background-color: rgb(19, 141, 172);
    text-align: center;
    color: #fff; 
	height: 20px;
	line-height: 20px;
}
div.org_panel .title .el-icon{
	top: 3px;
}
div.org_panel .teamleader{
    width: 100%;
    text-align: center;
}
div.org_panel .teamnum{
    width: 100%;
    font-family: '微软雅黑';
    font-size: 12px; 
    text-align: left;
    padding: 3px 5px;
    color: #7e7e7e;
}
div.org_panel_v{
    width: 50px;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    border: solid 1px rgb(51, 152, 177);
}
div.org_panel_v .title{
    width: 20px;
    height:120px;
    font-family: '微软雅黑';
    font-size: 14px;
    background-color: rgb(19, 141, 172);
    text-align: center;
    color: #fff; 
    writing-mode:vertical-lr;
    padding-left: 2px;
	position: relative;
}
div.org_panel_v .title .el-icon{
    position: absolute;
	top: 3px;
}
div.org_panel_v .teamleader{
    width: 25px;
    height:120px;
    text-align: center;
    writing-mode:vertical-lr;
    padding-left: 5px;
}
div.org_panel_v .teamnum{
    width:50px; 
    font-family: '微软雅黑';
    font-size: 12px; 
    text-align: center;
    padding: 3px 5px;
    color: #7e7e7e;
}
</style>
<script lang="ts" setup name="sysOrg">
import { onMounted, reactive, ref } from 'vue'; 
import { OfficeBuilding,Shop } from '@element-plus/icons-vue'
import html2pdf from '@sangtian152/html2pdf';

import { getAPI } from '/@/utils/axios-utils';
import { SysOrgApi, SysDictDataApi } from '/@/api-services/api';
import { SysOrg } from '/@/api-services/models'; 
import { template } from 'lodash-es';
import { fa } from 'element-plus/es/locale';

let tmpData={
	"id": 1300000000101,
	"label": "鹰美（荆门）制衣有限公司",
	"swtich":"myger",
	"level":1,
	"leader":"孟xx",
	"teamnum":0,
	"children": [
		{
			"label": "企划部",
			"level":2,
			"leader":"陈xx",
			"teamnum":10,
			"id": 1300000000102
		},
		{
			"label": "生产部",
			"level":2,
			"leader":"张xx",
			"teamnum":20,
			"children": [
				{ 
					"label": "A01",
					"level":3,
					"leader":"陈xx",
					"teamnum":6,
					"id": 13713876991429
				},
				{ 
					"label": "A02",
					"level":3,
					"leader":"陈xx",
					"teamnum":6,
					"id": 13713883589957
				},
				{
					"level":3,
					"leader":"陈xx",
					"teamnum":6,
					"label": "包装组",
					"id": 13713887549509
				},
				{
					"level":3,
					"leader":"陈xx",
					"teamnum":6,
					"label": "大烫组",
					"id": 13713891597509
				}
			],
			"id": 1300000000103
		},
		{
			"label": "财务部",
			"level":2,
			"leader":"张xx",
			"teamnum":8,
			"children": [
				{ 
					"leader":"陈xx",
					"teamnum":4,
					"level":3,
					"label": "会计",
					"id": 1300000000201
				},
				{ 
					"leader":"陈xx",
					"teamnum":4,
					"level":3,
					"label": "出纳",
					"id": 1300000000202
				}
			],
			"id": 1300000000104
		},
		{
			"label": "品管部",
			"level":2,
			"leader":"刘xx",
			"teamnum":10,
			"children": [
				{ 
					"leader":"刘xx",
					"teamnum":5,
					"level":3,
					"label": "QA",
					"id": 1371375974001
				},
				{ 
					"leader":"王xx",
					"teamnum":5,
					"level":3,
					"label": "FQC",
					"id": 1371375974002
				}
			],
			"id": 13713759734469
		},
		{ 
			"label": "IE部", 
			"level":2,
			"leader":"张xx",
			"teamnum":14,
			"children": [
				{ 
					"leader":"刘xx",
					"teamnum":10,
					"level":3,
					"label": "工价组",
					"id": 13713764796321
				},
				{ 
					"leader":"张xx",
					"teamnum":4,
					"level":3,
					"label": "TPE",
					"id": 13713764796322
				}
			],
			"id": 13713764795461
		}
	],
}
let treeLevelMap=new Map<string,any>();
const generateLevelMap=(_node:any)=>{
	treeLevelMap.set(_node.id,_node);
	if(_node.children && _node.children.length>0){
		for(let i=0;i<_node.children.length;i++){
			generateLevelMap(_node.children[i]);
		}
	}
}
generateLevelMap(tmpData);
const getNodeDetal=(_node:any)=>{
	let mapdata=treeLevelMap.get(_node.id);
	if(mapdata && mapdata.id>0){
		return mapdata;
	}
	return null; 
}

const state = reactive({
	loading: false,
	orgData: [] as Array<SysOrg>, // 机构列表数据
	orgTreeData: [] as Array<SysOrg>, // 机构树所有数据
	queryParams: {
		id: -1, 
		orgId: -1,
		expandLevel:2,
	}, 
	orgLevels: [] as any,
	horizontal:false,
	nodeDrggable:false,
	cloneNodeDrag:false,
	collapsable:false,
	data: tmpData,
	onlyOneNode: false,
	expandAll: true,
	disabled:true, 
	style: {
		background: "#fff",
		color: "#666666",
	},
});

onMounted(async () => {
	state.orgLevels =[{label:'1级',value:'1'},{label:'2级',value:'2'},{label:'3级',value:'3'},{label:'4级',value:'4'},{label:'5级',value:'5'},{label:'6级',value:'6'}];
	handleQuery();
	drawOrgMap();
});
 
// 查询操作
const handleQuery = async () => {
	state.loading = true;
	var res = await getAPI(SysOrgApi).apiSysOrgListGet(state.queryParams.id,);
	state.orgData = res.data.result ?? [];
	state.loading = false;

	let coList:Array<any>=[];
	if(state.orgData && state.orgData.length>0){
		state.orgData.forEach((el)=>{
			if(el.pid==0){
				coList.push({
					id:el.id,
					name:el.name,
				})
			}
		})
	} 
	state.orgTreeData =coList;
};

// 重置操作
const exportPdf = () => {
	let element=document.getElementById("orgTree_contair");
	document.getElementsByClassName("zm-tree-handle")[0].setAttribute('style','display:none');
	html2pdf(element, {
		title:state.data.label+'_组织架构图',
		scale:2,
		padding:[10,10,10,10],
		format:'A4',
		orientation:'L',
		unit:'pt',
	});
	document.getElementsByClassName("zm-tree-handle")[0].setAttribute('style','display:block');
};
 
 const drawOrgMap=()=>{

 }
</script>